import { useEffect, useRef } from "react";
import * as echarts from "echarts";

type dataItem={name:string,value:number,sum:number}
const LineChart = () => {
	const getArrByKey = (data:dataItem[], k:string) => {
		let key = k || "value";
		let res:any =[];
		if (data) {
			data.forEach((t)=> {
				// @ts-ignore
				res.push(t[key]);
			});
		}
		return res;
	};
	const getSymbolData = (data:dataItem[]) => {
		let arr = [];
		for (var i = 0; i < data.length; i++) {
			arr.push({
				value: data[i].value,
				symbolPosition: 'end'
			})
		}
		return arr;
	}
	let data=new Array(5).fill({name:'xxx',value:11,mun:1})
	console.log(data,'123')
	const echartsRef = useRef<HTMLDivElement>(null);
	let myChart: echarts.EChartsType;

	// let option: echarts.EChartsOption =  {
	let option: any =  {
		grid: {
			top: '2%',
			bottom: -15,
			right: 30,
			left: 30,
			containLabel: true
		},
		xAxis: {
			show: false
		},
		yAxis: [{
			triggerEvent: true,
			show: true,
			inverse: true,
			data:getArrByKey(data, 'name'),
			axisLine: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false,
				interval: 0,
				color: '#fff',
				align: 'left',
				margin: 80,
				fontSize: 13,
				formatter: function(value: string, index: any) {
					return '{title|' + value + '}'
				},
				rich: {
					title: {
						width: 165
					}
				}
			},
		}, {
			triggerEvent: true,
			show: true,
			inverse: true,
			data: getArrByKey(data, 'name'),
			axisLine: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				interval: 0,
				shadowOffsetX: -20,
				color: '#fff',
				align: 'right',
				verticalAlign: 'bottom',
				lineHeight: 30,
				fontSize: 13,
				// formatter: (value, index)=>{
				// 	return (data[index].value / data[index].sum) * 100
				// },
			}
		}],
		series: [{
			name: 'XXX',
			type: 'pictorialBar',
			symbol: 'image://',
			symbolSize: [50, 50],
			symbolOffset: [20, 0],
			z: 12,
			itemStyle: {
				normal: {
					color: '#14b1eb'
				}
			},
			data: getSymbolData(data)
		}, {
			name: '条',
			type: 'bar',
			showBackground: true,
			barBorderRadius: 30,
			yAxisIndex: 0,
			data: data,
			barWidth: 10,
			// align: left,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						1,
						0,
						[{
							offset: 0,
							color: '#A71A2B'
						},
							{
								offset: 0.7,
								color: '#A71A2B'
							},
							{
								offset: 1,
								color: '#5EDEE5'
							}
						],
						false
					),
					barBorderRadius: 10
				},
				// color: '#A71A2B',
				barBorderRadius: 4,
			},
			label: {
				normal: {
					color: '#fff',
					show: true,
					position: [0, '-20px'],
					textStyle: {
						fontSize: 16
					},
					formatter: function(a:dataItem, b:dataItem) {
						return a.name
					}
				}
			}
		}]
	};
	const setEcharts = () => {
		option && myChart.setOption(option);
	};


	useEffect(() => {
		myChart = echarts.init(echartsRef.current as HTMLDivElement);
		console.log()

		const echartsResize = () => {
			myChart && myChart.resize();
		};
		window.addEventListener("resize", echartsResize, false);

		setEcharts();
		return () => {
			window.removeEventListener("resize", echartsResize);
			myChart && myChart.dispose();
		};
	});

	return <div ref={echartsRef} className="content-box"></div>;
};

export default LineChart;
